import { Modal, Tabs } from 'antd';
import type React from 'react';
import { useState } from 'react';
import CardTradeTable from '../CardTradeTable';
import CustomerCardOperation from './CustomerCardOperation.tsx';

interface CustomerCardModalProps {
  visible: boolean;
  onCancel: () => void;
  cardID: string;
  onSuccess: () => void;
}

const CustomerCardModal: React.FC<CustomerCardModalProps> = ({
  visible,
  onCancel,
  cardID,
  onSuccess,
}) => {
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const handleOperationSuccess = () => {
    onSuccess();
    setRefreshTrigger((prev) => prev + 1);
  };

  return (
    <Modal
      title={`银行卡详情 - ${cardID}`}
      open={visible}
      onCancel={onCancel}
      footer={null}
      width={800}
    >
      <Tabs defaultActiveKey="1">
        <Tabs.TabPane tab="收支记录" key="1">
          <CardTradeTable cardID={cardID} refreshTrigger={refreshTrigger} />
        </Tabs.TabPane>
        <Tabs.TabPane tab="操作" key="2">
          <CustomerCardOperation
            cardID={cardID}
            onSuccess={handleOperationSuccess}
          />
        </Tabs.TabPane>
      </Tabs>
    </Modal>
  );
};

export default CustomerCardModal;
